<template>
	<view class="page">
		<view class="navBar">
			<view class="tabNav">
				<view class="tab" @click="tabnav(0)">
					药品
				</view>
				<view class="tab" @click="tabnav(1)">
					检查
				</view>
				<view class="tab" @click="tabnav(2)">
					检验
				</view>
				<view class="blue_line" :style="'left:'+position+'rpx;'">
					
				</view>
			</view>
			<view class="billing_recard">
				开单记录 >
			</view>
		</view>
		<!-- 导航切换内容 -->
		<view class="billing_content" style="padding-bottom: 50rpx;">
			<!-- 药品 -->
			<uv-vtabs class="vtabs"  barWidth="216rpx" :chain="chain" :list="medicine" :barItemBadgeStyle="{right:'20px',top:'12px'}" v-if="nav==0" @change="change">
				<uv-vtabs-item>
					<view class="tabsItem" v-for="(item,index) in medicine[medicineOption].childrens" :key="index">
						<view class="Image">
							<image class="emptyImg" :src="item.image" mode="widthFix"></image>
						</view>
						<view class="medicineInfo">
							<view class="medicine_title">
								{{item.title}}
							</view>
							<view class="effect">
								{{item.effect}}
							</view>
							<view class="price_mount">
								<view class="price">
									￥{{item.price}}
								</view>
								<uni-number-box :width=32 :min="0" :max="item.tags[1]=='限购5剂'?5:99" v-model="item.amount" ></uni-number-box>
							</view>
							<view class="tags" >
								<view class="tag" v-for="(tag,n) in item.tags" :style="n==1?'background-color: rgba(255, 240, 237, 1);color: #FF4D4F;':''">
									{{tag}}
								</view>
							</view>
						</view>
					</view>
					<kevy-empty :show="true" type="favor" text="没有列表哦~" v-if="medicine[medicineOption].childrens.length==0"></kevy-empty>
				</uv-vtabs-item>
			</uv-vtabs>
			<!-- 检查 -->
			<uv-vtabs class="vtabs"  barWidth="216rpx" :chain="chain" :list="inspects" :barItemBadgeStyle="{right:'20px',top:'12px'}" @change="inspect" v-if="nav==1">
				<uv-vtabs-item>
					<view class="inspectItem" v-for="(item,index) in inspects[inspectOption].childrens" :key="index">
						<view class="lineOne">
							<view class="title">
								{{item.title}}
							</view>
							<l-checkbox :value="item.title" v-model="item.checked" label="" icon="circle" />
						</view>
						<view class="price">
							￥{{item.price.toFixed(2)}}/次
						</view>
						<view class="tags">
							<view class="tag" v-for="(tag,n) in item.tags" :key="n">
								{{tag}}
							</view>
						</view>
					</view>
					<kevy-empty :show="true" type="favor" text="没有列表哦~" v-if="inspects[inspectOption].childrens.length==0"></kevy-empty>
				</uv-vtabs-item>
			</uv-vtabs>
			<!-- 检验 -->
			<uv-vtabs class="vtabs"  barWidth="216rpx" :chain="chain" :list="examins" :barItemBadgeStyle="{right:'20px',top:'12px'}" @change="examin" v-if="nav==2">
				<uv-vtabs-item>
					<view class="examinItem" v-for="(item,index) in examins[examinOption].childrens" :key="index">
						<view class="basic" v-if="item.title">
							<view class="lineOne">
								<view class="title">
									{{item.title}}
								</view>
								<l-checkbox v-model="item.checked" label="" icon="circle" />
							</view>
							<view class="price">
								￥{{item.price.toFixed(2)}}/次
							</view>
						</view>
						<view class="group" v-else>
							<view class="group_title">
								<view class="group_name">
									{{item.group_title}}
								</view>
								<l-checkbox v-model="item.checked" label="" icon="circle" />
							</view>
							<view class="group_lists" v-for="(list,i) in item.group_lists" :key="i">
								<view class="group_list">
									<view class="list_title">
										{{list.title}}
									</view>
									<view class="list_price">
										￥{{list.price.toFixed(2)}}/次
									</view>
								</view>
							</view>
						</view>
					</view>
				</uv-vtabs-item>
			</uv-vtabs>
		</view>
		<!-- 底部固定结算栏 -->
		<view class="settlement">
			<view class="left">
				<image style="width: 80rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%BC%80%E5%8D%95%E7%94%B3%E8%AF%B7/u2074.svg" mode="widthFix" @click="Selectedprojects"></image>
				<view class="totalInfo">
					<view class="select">
						已选<text style="color: #1677FF;"> {{vModelMount+vInspectMount+vExaminsMount}} </text>项
					</view>
					<view class="amount">
						合计:<text style="color: #FF4D4F;font-weight: 700;"> ￥ {{(vModelPrice+vInspectPrice+vExaminsPrice).toFixed(2)}}</text>
					</view>
				</view>
			</view>
			<button class="submit" @click="submit">提交</button>
		</view>
		<!-- 结算弹出层 -->
		<uni-popup ref="popup" class="popup" type="bottom" background-color="#fff" border-radius="10px 10px 0 0">
			<view class="popup-content">
				<view class="topInfo">
					<view class="title">
						已选项目
					</view>
					<view class="clear" @click="clearall">
						全部清空
					</view>
				</view>
				<kevy-empty :show="true" type="favor" text="没有列表哦~" v-if="medicineselects.length==0 && vInspectlists.length==0 && vExaminslists.length==0"></kevy-empty>
				<view class="Selectedlists" v-else>
					<view class="Selectedlist">
						<view class="medicine" v-for="(item,index) in medicineselects" :key="index">
							<view class="lineOne">
								<view class="logo">
									药
								</view>
								<view class="title">
									{{item.title}}
								</view>
							</view>
							<view class="lineTwo">
								<view class="unitprice">
									￥{{item.price.toFixed(2)}}/剂
								</view>
								<uni-number-box :width=32 :min="1" v-model="item.amount"  />
							</view>
							<view class="tags">
								<view class="tag" v-for="(tag,i) in item.tags">
									{{tag}}
								</view>
							</view>
						</view>
						<!-- 检查和检验 -->
						<view class="other" v-for="(item,index) in vInspectlists" :key="index">
							<view class="lineOne">
								<view class="selcetInfo">
									<view class="logo">
										查
									</view>
									<view class="title">
										{{item.title}}
									</view>
								</view>
								<l-checkbox :checked='item.checked' label="" icon="circle" />
							</view>
							<view class="pricebar">
								￥{{item.price.toFixed(2)}}/次
							</view>
						</view>
						<view class="other" v-for="(item,index) in vExaminslists" :key="index">
							<view class="lineOne">
								<view class="selcetInfo">
									<view class="logo" style="background-color: rgba(255, 241, 240, 1); color: #FF4D4F;">
										验
									</view>
									<view class="title">
										{{item.title}}
									</view>
								</view>
								<l-checkbox :checked='item.checked' label="" icon="circle" />
							</view>
							<view class="pricebar">
								￥{{item.price.toFixed(2)}}/次
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { computed, reactive, ref, watch } from 'vue';
	// 导航切换
	const nav = ref(0)
	const tabnav = (index) => {
		// console.log(index)
		nav.value=index
	}
	const position = computed(()=>{
		return nav.value*114
	})
	// 产品数量输入框
	const vModelMount = ref(0)		//总数量
	const vModelPrice = ref(0)		//总价格
	const medicineselects = reactive([])
	// 药品
	const chain = ref(false)
	const medicineOption = ref(0)	//药品侧边选项
	const change=(index)=> {
		// console.log('选项改变：', index)
		medicineOption.value = index
		
	}
	const medicine = reactive([
		{
			name:'新冠预防中药',
			childrens:[
				{
					id:1,
					title:'新冠预防中药（正常人群）1剂',
					image:'https://cdn8.axureshop.com/demo/2208121/images/%E5%BC%80%E5%8D%95%E7%94%B3%E8%AF%B7/u1882.svg',
					effect:'功效：主要提高免疫力，预防新冠疾病',
					price:10.08,
					amount:0,
					tags:['处方药','限购5剂']
				},
				{
					id:2,
					title:'新冠预防中药（体弱人群）1剂',
					image:'https://cdn8.axureshop.com/demo/2208121/images/%E5%BC%80%E5%8D%95%E7%94%B3%E8%AF%B7/u1882.svg',
					effect:'功效：主要提高免疫力，预防新冠疾病',
					price:11.08,
					amount:0,
					tags:['处方药','限购5剂']
				},
				{
					id:3,
					title:'新冠预防中药（儿童人群）1剂',
					image:'https://cdn8.axureshop.com/demo/2208121/images/%E5%BC%80%E5%8D%95%E7%94%B3%E8%AF%B7/u1882.svg',
					effect:'功效：主要提高免疫力，预防新冠疾病',
					price:9.08,
					amount:0,
					tags:['处方药']
				}
			]
		},
		{
			name:'普通用药',
			childrens:[
				{
					id:4,
					title:'云南白药胶囊 0.5g*20片',
					image:'https://cdn8.axureshop.com/demo/2208121/images/%E5%BC%80%E5%8D%95%E7%94%B3%E8%AF%B7/u1882.svg',
					effect:'功效：止血',
					price:10.08,
					amount:0,
					tags:['处方药','无库存']
				}
			]
		},
		{
			name:'感冒用药（非处方）',
			childrens:[]
		}
	])
	// 药品监听
	watch(medicine,(val,oldVal)=>{
		vModelMount.value=0
		vModelPrice.value=0
		medicineselects.splice(0)
		val.forEach(item=>{
			item.childrens.forEach(list=>{
				if(list.amount>0){
					vModelMount.value+=list.amount
					vModelPrice.value+=list.amount*list.price
					medicineselects.push(list)			
				}
			})
		})
	})
	// 检查
	const inspectOption = ref(0)
	const inspect = (index) => {
		// console.log('检查选项改变：', index)
		inspectOption.value = index
	}
	const inspects = reactive([
		{
			name:'心电血压',
			childrens:[
				{
					title:'动态心电图',
					checked:false,
					price:150,
					tags:['注意事项']
				},
				{
					title:'12导同步心电图检查',
					checked:false,
					price:30,
					tags:[]
				}
			]
		},
		{
			name:'放射普放',
			childrens:[
				{
					title:'动态心电图',
					checked:false,
					price:150,
					tags:[]
				},
				{
					title:'12导同步心电图检查',
					checked:false,
					price:30,
					tags:[]
				}
			]
		},
		{
			name:'超声检查',
			childrens:[]
		}
	])
	// 检查监听
	const vInspectMount = ref(0)	//检查总数量
	const vInspectPrice = ref(0)	//检查总价格
	const vInspectlists = reactive([])	//检查选中数组
	watch(inspects,(val,oldVal)=>{
		vInspectMount.value = 0
		vInspectPrice.value = 0
		vInspectlists.splice(0)
		val.forEach(item=>{
			item.childrens.forEach(list=>{
				if(list.checked){
					vInspectMount.value+=1
					vInspectPrice.value+=list.price
					vInspectlists.push(list)
				}
			})
		})
	})
	// 检验
	const examinOption = ref(0)
	const examin = (index) => {
		// console.log('检验选项改变：', index)
		examinOption.value = index
	}
	const examins = reactive([
		{
			name:'血常规+生化检查',
			childrens:[
				{
					title:'血常规',
					checked:false,
					price:15,
				},
				{
					title:'12血常规+网织红细胞',
					checked:false,
					price:38,
				},
				{
					title:'肝功',
					checked:false,
					price:38,
				},
				{
					title:'肾功',
					checked:false,
					price:24,
				}
			]
		},
		{
			name:'免疫血液检查',
			childrens:[
				{
					title:'抗核抗体测定（ANA）',
					checked:false,
					price:15,
				},
				{
					title:'类风湿因子（RF）',
					checked:false,
					price:38,
				}
			]
		},
		{
			name:'体检检查',
			childrens:[
				{
					group_title:'生化常规组合',
					checked:false,
					group_lists:[
						{
							title:'血细胞分析',
							price:60
						},
						{
							title:'血脂1',
							price:25
						},
						{
							title:'尿常规',
							price:25
						}
					]
				},
				{
					title:'驾驶员体检',
					checked:false,
					price:60,
				},
				{
					title:'尿常规',
					checked:false,
					price:25,
				}
			]
		}
	])
	// 检验监听
	const vExaminsMount = ref(0)	//检验数量
	const vExaminsPrice = ref(0)	//检验价格
	const vExaminslists = reactive([])	//检验选中列表
	watch(examins,(val,oldVal)=>{
		vExaminsMount.value = 0
		vExaminsPrice.value = 0
		vExaminslists.splice(0)
		val.forEach(item=>{
			item.childrens.forEach(list=>{
				if(list.checked){
					vExaminsMount.value+=1
					vExaminsPrice.value+=list.price
					vExaminslists.push(list)
				}
			})
		})
	})
	// 全部清空
	const clearall = () => {
		vExaminslists.splice(0)
		vInspectlists.splice(0)
		medicineselects.splice(0)
		// 清空药品
		medicine.forEach(item=>{
			item.childrens.forEach(list=>{
				if(list.amount>0){
					list.amount=0
				}
			})
		})
		// 清空检查
		inspects.forEach(item=>{
			item.childrens.forEach(list=>{
				if(list.checked){
					list.checked=false
				}
			})
		})
		// 清空检验
		examins.forEach(item=>{
			item.childrens.forEach(list=>{
				if(list.checked){
					list.checked=false
				}
			})
		})
	}
	// 底部提交按钮
	const popup = ref(null)
	const Selectedprojects = () => {
		popup.value.open()
	}
	// 提交
	const submit = () => {
		if((vModelMount.value+vInspectMount.value+vExaminsMount.value)==0){
			uni.showToast({
				title:'请先选择开单清单',
				icon:'none'
			})
		}else{
			uni.navigateTo({
				url:'/pages/Confirmation_billing/Confirmation_billing?medicineselects='+JSON.stringify(medicineselects)+'&vInspectlists='+JSON.stringify(vInspectlists)+'&vExaminslists='+JSON.stringify(vExaminslists)+'&subtotal='+Number(vExaminsPrice.value+vInspectPrice.value+vModelPrice.value)
			})
		}
		
		
	}
</script>

<style lang="scss" scoped>
	.page{
		.navBar{
			width: 100%;
			height: 100rpx;
			border-top: 2rpx solid rgba(242, 242, 242, 1);
			border-bottom: 2rpx solid rgba(242, 242, 242, 1);
			box-sizing: border-box;
			padding: 0 30rpx 0 54rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.tabNav{
				width: 294rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 32rpx;
				color: #333;
				position: relative;
				.tab{
					cursor: pointer;
				}
				.blue_line{
					width: 66rpx;
					height: 8rpx;
					background-color: rgba(24, 144, 255, 1);
					border-radius: 16rpx;
					position: absolute;
					left: 0rpx;
					bottom: 0;
					transition: all .3s; 
				}
			}
			.billing_recard{
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #1677FF;
			}
		}
		.vtabs{
			// 药品
			.tabsItem{
				
				padding: 34rpx 40rpx 20rpx 48rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid #f2f2f2;
				.Image{
					width: 100rpx;
					height: 100rpx;
					background-color: rgba(215, 215, 215, 1);
					border-radius: 8rpx;
					position: relative;
					.emptyImg{
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%,-50%);
						width: 60rpx;
					}
				}
				.medicineInfo{
					width: 320rpx;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #333;
					.medicine_title{
						font-size: 32rpx;
					}
					.effect{
						font-size: 24rpx;
						color: #7f7f7f;
						margin-top: 30rpx;
					}
					.price_mount{
						height: 50rpx;
						margin-top: 30rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.price{
							color: #FF4D4F;
						}
					}
					.tags{
						margin-top: 30rpx;
						display: flex;
						align-items: center;
						.tag{
							padding: 8rpx 9rpx;
							border-radius: 4rpx;
							font-size: 24rpx;
							font-family: 'Microsoft YaHei UI', sans-serif;
							// line-height: 44rpx;
							background-color: rgba(240, 247, 255, 1);
							color: #007AFF;
							margin-right: 20rpx;
						}
					}
				}
			}
			// 检查
			.inspectItem{
				padding: 34rpx 40rpx 20rpx 48rpx;
				box-sizing: border-box;
				border-bottom: 2rpx solid #f2f2f2;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #000;
				.lineOne{
					height: 44rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.title{
						font-size: 32rpx;
					}
				}
				.price{
					font-size: 24rpx;
					color: #FF4D4F;
					margin-top: 26rpx;
				}
				.tags{
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					.tag{
						padding: 8rpx 9rpx;
						border-radius: 4rpx;
						font-size: 24rpx;
						font-family: 'Microsoft YaHei UI', sans-serif;
						// line-height: 44rpx;
						background-color: rgba(255, 240, 237, 1);
						color: #FF4D4F;
						margin-right: 20rpx;
					}
				}
			}
			// 检验
			.examinItem{
				padding-top: 20rpx;
				box-sizing: border-box;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #000;
				.basic{
					padding: 14rpx 40rpx 20rpx 48rpx;
					box-sizing: border-box;
					border-bottom: 2rpx solid #f2f2f2;
					.lineOne{
						height: 44rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.title{
							font-size: 32rpx;
						}
					}
					.price{
						font-size: 24rpx;
						color: #FF4D4F;
						margin-top: 26rpx;
					}
				}
				.group{
					width: 498rpx;
					margin: auto;
					border: 2rpx solid rgba(230, 244, 255, 1);
					.group_title{
						height: 80rpx;
						padding: 0 18rpx 0 16rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: space-between;
						background-color: rgba(230, 244, 255, 1);
					}
					.group_lists{
						.group_list{
							padding: 38rpx 20rpx 20rpx;
							border-top: 2rpx solid rgba(230, 244, 255, 1);
							box-sizing: border-box;
							font-family: 'Microsoft YaHei UI', sans-serif;
							color: #333;
							.list_title{
								font-size: 32rpx;
							}
							.list_price{
								margin-top: 26rpx;
								color: #FF4D4F;
								font-size: 24rpx;
							}
						}
					}
				}
			}
		}
		// 底部结算固定栏
		.settlement{
			width: 100%;
			height: 148rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			display: flex;
			z-index: 999;
			align-items: center;
			justify-content: space-between;
			padding: 0 26rpx;
			box-sizing: border-box;
			.left{
				display: flex;
				align-items: center;
				.totalInfo{
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 24rpx;
					margin-left: 20rpx;
					.amount{
						font-size: 28rpx;
						margin-top: 4rpx;
					}
				}
				
			}
			.submit{
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #fff;
				background-color: rgba(22, 119, 255, 1);
				border-radius: 40rpx;
				margin: 0 !important;
				cursor: pointer;
			}
			
		}
		// 结算弹出层
		.popup{
			.popup-content{
				width: 100%;
				height: 1100rpx;
				overflow: auto;
				background-color: #fff;
				border-radius: 40rpx 40rpx 0 0;
				padding: 0rpx 36rpx 148rpx 52rpx;
				box-sizing: border-box;
				.topInfo{
					width: 100%;
					height: 32rpx;
					font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial', sans-serif;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					position: sticky;
					top: 0;
					background-color: #fff;
					padding-top: 30rpx;
					padding-bottom: 20rpx;
					z-index: 88;
					.title{
						font-weight: 700;
					}
					.clear{
						font-size: 24rpx;
						color: #555;
						cursor: pointer;
					}
				}
				.Selectedlists{
					.Selectedlist{
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 28rpx;
						color: #333;
						
						// 药
						.medicine{
							padding-top: 40rpx;
							padding-bottom: 18rpx;
							border-bottom: 2rpx solid #f2f2f2;
							box-sizing: border-box;
							.lineOne{
								height: 52rpx;
								display: flex;
								align-items: center;
								.logo{
									width: 34rpx;
									height: 46rpx;
									line-height: 46rpx;
									text-align: center;
									background-color: rgba(240, 245, 255, 1);
									color: #2F54EB;
									font-size: 24rpx;
									border-radius: 4rpx;
									margin-right: 10rpx;
								}
								.title{
									font-size: 32rpx;
								}
							}
							.lineTwo{
								height: 50rpx;
								margin-top: 32rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
								.unitprice{
									color: #FF4D4F;
								}
							}
							.tags{
								margin-top: 14rpx;
								display: flex;
								align-items: center;
								.tag{
									padding: 8rpx 9rpx;
									border-radius: 4rpx;
									font-size: 24rpx;
									font-family: 'Microsoft YaHei UI', sans-serif;
									// line-height: 44rpx;
									background-color: rgba(240, 247, 255, 1);
									color: #007AFF;
									margin-right: 20rpx;
								}
							}
						}
						// 检查和检验
						.other{
							padding-top: 40rpx;
							padding-bottom: 18rpx;
							border-bottom: 2rpx solid #f2f2f2;
							box-sizing: border-box;
							.lineOne{
								display: flex;
								align-items: center;
								justify-content: space-between;
								.selcetInfo{
									display: flex;
									align-items: center;
									.logo{
										width: 34rpx;
										height: 46rpx;
										line-height: 46rpx;
										text-align: center;
										background-color: rgba(255, 242, 232, 1);
										color: #FF7A45;
										font-size: 24rpx;
										border-radius: 4rpx;
										margin-right: 10rpx;
									}
									.title{
										font-size: 32rpx;
									}
								}
							}
							.pricebar{
								margin-top: 34rpx;
								color: #FF4D4F;
								font-size: 28rpx;
							}
						}
					}
				}
			}
		}
	}       
</style>
